<template>
	<view class="pages-choose pt-md" v-if="options.type">
		<view class="fill-base ml-md mr-md pl-lg pr-lg radius-16" v-if="options.type === 'enroll'">
			<block v-for="(item,index) in fieldList" :key="index">
				<view class="choose-item flex-center b-1px-b" @tap.stop="hannelField(index)">
					<view class="choose-item-text f-mini-title flex-y-center">
						<text class="text-bold">{{item.name}}</text>
						<text class="c-paragraph pr-sm"
							style="padding-left: 6rpx;word-break: keep-all">({{item.is_required == 1 ? '必填' : '非必填'}})</text>
					</view>
					<view class="flex-1 c-paragraph">{{fieldType[item.type]}}</view>
					<i class="iconfont"
						:class="[{'icon-xuanze': !checkField.includes(String(item.id))},{'icon-xuanze-fill': checkField.includes(String(item.id)) || index==0}]"
						:style="{color: checkField.includes(String(item.id)) || index==0 ? primaryColor : '#D5D6DA' }"
						style="font-size: 20px;"></i>
				</view>
			</block>
		</view>
		<view class="fill-base ml-md mr-md pl-lg pr-lg radius-16" v-else>
			<view class="participants-item b-1px-b">
				<view class="f-mini-title text-bold">是否限制参与人年龄</view>
				<view class="pt-lg flex-y-center">
					<view class="flex-y-center" style="margin-right: 108rpx;" @tap="hannelAge(item.id)"
						v-for="(item,index) in [{title: '是', id: 1},{title: '否', id: 0}]" :key="index">
						<i class="iconfont" style="font-size: 20px;"
							:class="[{'icon-radio-fill':form.limit_age==item.id},{'icon-xuanze':form.limit_age!=item.id}]"></i>
						<text class="c-title f-mini-title pl-sm">{{item.title}}</text>
					</view>
				</view>
			</view>
			<view class="participants-item b-1px-b" style="padding-bottom: 0;" v-if="form.limit_age == 1">
				<view class="f-mini-title text-bold">参与人年龄</view>
				<view class="flex-y-center f-title">
					<input class="item-input f-mini-title" type="text" placeholder="最小年龄" v-model="form.min_age" />至
					<input class="item-input f-mini-title text-right" type="text" placeholder="最大年龄"
						v-model="form.max_age" />
				</view>
			</view>
			<picker @change="pickerChange($event, 'ratio')" :value="form.limit_sex" :range="ratioList"
				range-key="title">
				<view class="participants-item flex-between">
					<view class="f-mini-title text-bold">参与人性别比例</view>
					<view class="flex-center">
						<text
							class="f-mini-title pr-sm">{{ form.limit_sex != -1 ? ratioList[form.limit_sex].title : '请选择' }}</text>
						<i class="iconfont icon-right text-bold" style="color: #9B9B9B;font-size: 13px;"></i>
					</view>
				</view>
			</picker>
		</view>

		<view class="space-max-footer"></view>
		<fix-bottom-button @confirm="submit" :text="[{text:'提交',type:'confirm',isAuth:false}]" bgColor="#fff">
		</fix-bottom-button>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';

	export default {
		data() {
			return {
				list: {
					data: []
				},
				param: {
					page: 1
				},
				activeIndex: 0,
				childIndex: -1,
				options: {},
				ratioList: [{
						title: '不限',
						id: 0
					},
					{
						title: '只限男生',
						id: 1
					},
					{
						title: '只限女生',
						id: 2
					},
					{
						title: '男女对半',
						id: 3
					}
				],
				fieldType: {
					1: '文本',
					2: '单选',
					3: '图片'
				},
				fieldList: [],
				checkField: [],
				form: {
					limit_age: 1,
					min_age: '',
					max_age: '',
					limit_sex: 0 // 0不限制 1男 2女 3对半
				},
				rule: [{
						name: "min_age",
						checkType: "isNumber",
						errorMsg: "请输入最小年龄",
						regType: 1
					},
					{
						name: "max_age",
						checkType: "isNumber",
						errorMsg: "请输入最大年龄",
						regType: 1
					},
				]
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		async onLoad(options) {
			let {
				type = ''
			} = options
			try {
				if (type == 'enroll') {
					this.checkField = this.$util.getPage(-1).form.field
				} else {
					for (let key in this.form) {
						this.form[key] = this.$util.getPage(-1).form[key]
					}
				}
			} catch (e) {
				// #ifdef H5
				history.back()
				// #endif
			}
			this.options = options
			this.initIndex()
		},
		methods: {
			...mapActions(['getConfigInfo']),
			async initIndex(refresh = false) {
				if (!this.configInfo.id || refresh) {
					this.getConfigInfo()
				}
				this.getFieldList()
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				uni.setNavigationBarTitle({
					title: this.options.type === 'enroll' ? '选择报名字段' : '参与人条件'
				})
			},
			async getFieldList() {
				let data = await this.$api.partner.fieldList()
				this.fieldList = data
			},
			hannelField(index) {
				if (index == 0) return
				let {
					id = 0
				} = this.fieldList[index]
				let ind = this.checkField.findIndex(item => {
					return id == item
				})
				if (ind != -1) {
					this.checkField.splice(ind, 1)
				} else {
					this.checkField.push(String(id))
				}
			},
			pickerChange(e, type) {
				let {
					value
				} = e.detail
				console.log(e)
				this.form.limit_sex = value
			},
			hannelAge(id) {
				this.form.limit_age = id
			},
			//表单验证
			validate(param) {
				let validate = new this.$util.Validate();
				this.rule.map(item => {
					let {
						name,
					} = item
					console.log(item)
					if (param.limit_age == 0 && ['min_age', 'max_age'].includes(name)) {} else {
						validate.add(param[name], item);
					}
				})
				let message = validate.start();
				return message;
			},
			submit() {
				if (this.options.type === 'enroll') {
					let field_text = ''
					this.fieldList.forEach(item => {
						if (this.checkField.includes(String(item.id))) {
							field_text += field_text ? '，' + item.name : item.name
						}
					})
					this.$util.getPage(-1).form.field_text = field_text ? '手机号，' + field_text : field_text
					this.$util.getPage(-1).form.field = this.checkField
				} else {
					let param = this.$util.deepCopy(this.form)
					let msg = this.validate(param);
					if (msg) {
						this.$util.showToast({
							title: msg
						});
						return;
					}
					if (param.min_age * 1 >= param.max_age * 1 && param.limit_age == 1) {
						this.$util.showToast({
							title: '最大年龄输入值不能小于等于最小年龄'
						});
						return;
					}
					param.participants = 1
					let form = Object.assign({}, this.$util.getPage(-1).form, param)
					this.$util.getPage(-1).form = form
				}
				this.$util.goUrl({
					url: 1,
					openType: 'navigateBack'
				})
			}
		},
	}
</script>


<style lang="scss">
	.pages-choose {
		.choose-item {
			height: 110rpx;

			.choose-item-text {
				width: 260rpx;
			}

			input {
				height: 110rpx;
			}
		}

		.participants-item {
			padding: 40rpx 0;

			.item-input {
				height: 116rpx;
				width: 220rpx;
			}
		}
	}
</style>